<template>
  <div :style="{ width: size + 'px', height: size + 'px' }" class="progress-circle">
    <svg :width="size" :height="size" viewBox="0 0 100 100">
      <circle class="background" cx="50" cy="50" r="45" stroke-width="8" fill="none" />
      <circle
        class="progress"
        cx="50"
        cy="50"
        r="45"
        stroke-width="8"
        :stroke="color"
        fill="none"
        stroke-dasharray="282"
        :stroke-dashoffset="282 - (computedProgress / 100) * 282"
        style="transition: stroke-dashoffset 0.6s"
      />
    </svg>
    <div class="text" :style="{ fontSize: size / 5 + 'px' }">{{ text }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = defineProps<{
  progress?: number;
  color?: string;
  size?: number;
  text?: string;
  duration?: number;
}>();

// 设置默认值
const defaultProgress = 50;
const defaultColor = 'red';
const defaultSize = 120;
const defaultDuration = 500;
const defaultText = '50%'; // 默认文案

const computedProgress = ref(0);
const color = ref(props.color ?? defaultColor); // 使用传入的颜色或默认颜色
const size = ref(props.size ?? defaultSize); // 使用传入的大小或默认大小
const text = ref(props.text ?? defaultText); // 使用传入的文本或默认文本

onMounted(() => {
  setTimeout(() => {
    computedProgress.value = props.progress ?? defaultProgress;
  }, props.duration ?? defaultDuration);
});
</script>

<style scoped>
.progress-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

svg {
  transform: rotate(-90deg);
}

circle.background {
  stroke: #eee;
}

circle.progress {
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.text {
  position: absolute;
  font-weight: bold;
}
</style>
